<!--这是供 人脉 组件-->
<template>
  <div class="app-container">
    <el-form :model="postForm" v-loading="formLoading" :rules="rules" ref="postForm" label-width="220px" label-position="right">
      <p class="title">发布 供 人脉</p>
      <el-form-item label="标题：" prop="title">
        <el-input v-model="title" placeholder="请输入所求标题（不超过30个字）" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="name" placeholder="请输入姓名" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="年龄：" prop="age">
        <el-select v-model="postForm.age" placeholder="请选择" style="width: 650px" @change="ageSelect">
          <el-option v-for="item in ageOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-select  style="width: 650px;" v-model="postForm.sex" placeholder="请选择"  @change="sexSelect">
            <el-option key="0" label="男" value="男"></el-option>
            <el-option key="1" label="女" value="女"></el-option>
            <el-option key="2" label="保密" value="保密"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在地区：" prop="place">
        <v-distpicker :province="postForm.citySelect.province" :city="postForm.citySelect.city" :area="postForm.citySelect.area" style="float: left;"></v-distpicker>
      </el-form-item>
      <el-form-item label="行业：" prop="trade">
        <el-select v-model="postForm.trade" clearable placeholder="请选择" style="width: 650px" @change="tradeSelect">
          <el-option v-for="item in tradeOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="职务：" prop="duty">
        <el-input v-model="duty" placeholder="职务" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="资产状况：" prop="asset">
        <el-select v-model="postForm.asset" clearable placeholder="请选择" style="width: 650px" @change="assetSelect">
          <el-option v-for="item in assetOptions" :key="item.id" :label="item.value" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否单身：" prop="single">
        <el-select  style="width: 650px;" v-model="postForm.isSingle" placeholder="请选择"  @change="singleSelect">
            <el-option key="0" label="男" value="男"></el-option>
            <el-option key="1" label="女" value="女"></el-option>
            <el-option key="2" label="保密" value="保密"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="爱好：">
        <el-input v-model="postForm.hobby" placeholder="请填写此人的爱好" style="width: 650px;"></el-input>
      </el-form-item>
      <el-form-item label="详细描述：">
        <el-input v-model="postForm.describe" placeholder="详细描述下优势(非必填，不超过100字)" style="width: 650px;"></el-input>
      </el-form-item>
      <el-form-item label="联系人：" prop="contact">
        <el-input v-model="postForm.contact" placeholder="请填写联系人" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item label="联系方式：" prop="phone">
        <el-input v-model="postForm.phone" placeholder="请填写联系方式" style="width: 650px"></el-input>
      </el-form-item>
      <el-form-item label="微信号：">
        <el-input v-model="postForm.wechatNum" placeholder="请填写微信号" style="width: 650px"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
        <el-button type="info">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import VDistpicker from 'v-distpicker' // 引入城市选择器插件

const postForm = {
  title: null, // 所求标题
  name: null, // 姓名
  age: null, // 年龄
  sex: null, // 性别
  citySelect: { province: '福建省', city: '厦门市', area: '集美区' }, // 所在地区
  trade: null, // 行业
  duty: null, // 职务
  asset: null, // 资产
  isSingle: null, // 是否单身
  hobby: null, // 爱好
  describe: null, // 爱好的详细描述
  contact: null, // 联系人
  phone: null, // 联系方式
  wechatNum: null // 微信号
}
const tradeOptions = [
  { id: 0, value: '互联网' },
  { id: 1, value: '医疗' },
  { id: 2, value: '文化旅游' },
  { id: 3, value: '高科技' },
  { id: 4, value: '房地产' },
  { id: 5, value: '金融' },
  { id: 6, value: '其他' }
]
const assetOptions = [
  { id: 0, value: '无资产要求' },
  { id: 1, value: '100万以下' },
  { id: 2, value: '100-500万' },
  { id: 3, value: '500-1000万' },
  { id: 4, value: '100-5000万' },
  { id: 5, value: '5000万-1亿' },
  { id: 6, value: '1亿以上' },
  { id: 7, value: '保密' }
]
const ageOptions = [
  { id: 0, value: '1-10' },
  { id: 1, value: '11-20' },
  { id: 2, value: '21-30' },
  { id: 3, value: '31-40' },
  { id: 4, value: '41-50' },
  { id: 5, value: '51-60' },
  { id: 6, value: '61-70' },
  { id: 7, value: '71-80' },
  { id: 8, value: '81-90' },
  { id: 9, value: '91-99' }
]
const rules = {
  title: [{ required: true, message: '请输入所求标题', trigger: 'blur' }],
  capital: [{ required: true, message: '请输入可供资金', trigger: 'blur' }],
  age: [{ required: true, message: '请选择年龄', trigger: 'change' }],
  sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
  place: [{ required: true, message: '请选择地区', trigger: 'change' }],
  trade: [{ required: true, message: '请选择行业', trigger: 'change' }],
  duty: [{ required: true, message: '请输入职务', trigger: 'blur' }],
  asset: [{ required: true, message: '请选择资产状况', trigger: 'change' }],
  single: [{ required: true, message: '请选择是否单身', trigger: 'change' }],
  contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
}

export default {
  components: {
    VDistpicker
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, postForm),
      rules,
      tradeOptions,
      assetOptions,
      ageOptions,
      formLoading: false,
      btnLoading: false
    }
  },
  methods: {
    ageSelect(val) {
    },
    sexSelect(val) {
    },
    assetSelect(val) {
    },
    tradeSelect(val) {
    },
    singleSelect(val) {
    },
    submitForm() {
    }
  }
}
</script>
<style scoped>
	.title{
		font-size: 18px;
		line-height: 36px;
		padding: 0 10px;
	}
</style>